﻿@inherits RazorFunction
@using Composite.Media.YouTubeChannel
@using Composite.Media.YouTubeChannel.JSonData
@functions {
    public override string FunctionDescription
    {
        get { return "A Youtube Channel Playlists Viewer"; }
    }

    [FunctionParameter(Label = "YouTube Channel", Help = "The user name or URL of the YouTube channel")]
    public string YouTubeChannel { get; set; }

    [FunctionParameter(Label = "API Key", Help = "API Key")]
    public string APIKey { get; set; }

    [FunctionParameter(Label = "Page Size", Help = "The count of videos per page.", DefaultValue = 10)]
    public int PageSize { get; set; }
}
@{
    YouTubeChannel = YoutubeChannelFacade.ParseYouTubeChannelReference(YouTubeChannel);

    // var pageToken = Request["pagetoken"] ?? string.Empty;
    var playLists = YoutubeChannelFacade.GetYouTubePlayLists(APIKey, YouTubeChannel, 50, null);

    if (playLists == null)
    {
        <p class="alert alert-warning">@Resources.YouTubeChannel.ChannelNotFound</p>
        return;
    }

    if (!playLists.items.Any())
    {
        <div class="alert alert-warning">@Resources.YouTubeChannel.NoItemsMessage</div>
        return;
    }
    var playlistId = Request["id"];
    ListItem currentPlaylist = null;
    if (!string.IsNullOrEmpty(playlistId))
    {
        currentPlaylist = playLists.items.FirstOrDefault(p => p.id == playlistId);
    }

    if (currentPlaylist == null)
    {
        currentPlaylist = playLists.items[0];
    }
    var pageToken = Request["pagetoken"] ?? string.Empty;
    var playlistItems = YoutubeChannelFacade.GetYouTubePlayListItems(currentPlaylist.id, PageSize, pageToken, APIKey);


}
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0">
<head>
</head>
<body>
    <div class="youtube-playlists">

        <h2>@currentPlaylist.snippet.title <small>@currentPlaylist.contentDetails["itemCount"] @(currentPlaylist.contentDetails["itemCount"] == "1" ? Resources.YouTubeChannel.VideoOneCountText : Resources.YouTubeChannel.VideoCountText)</small></h2>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-7">
                <div class="media-object">
                    <div id="ytplayer" class="player-window"></div>
                    <div class="media-body">
                        <h3 id="js-player-title" class="media-heading">
                            @playlistItems.items[0].snippet.title
                        </h3>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-5">
                <div class="list-group">
                    @foreach (var item in playlistItems.items)
                    {
                        <a href="#@item.snippet.resourceId.videoId" title="@item.snippet.title" class="list-group-item clearfix" data-title="@item.snippet.title" data-id="@item.snippet.resourceId.videoId">
                            <img class="img-responsive pull-left" src="@item.snippet.thumbnails["default"].url" alt="img" />
                            <h5 class="list-group-item-heading">@item.snippet.title</h5>
                        </a>
                    }
                </div>
                @if (playlistItems.pageinfo.totalResults > PageSize)
                {
                    <ul class="pagination">
                        @if (!string.IsNullOrEmpty(playlistItems.prevPageToken))
                        {
                            <li><a href="?id=@(currentPlaylist.id)&amp;pagetoken=@(playlistItems.prevPageToken)" title="Previous">«</a></li>
                        }
                        else
                        {
                            <li class="disabled"><a>«</a></li>
                        }

                        @if (!string.IsNullOrEmpty(playlistItems.nextPageToken))
                        {
                            <li><a href="?id=@(currentPlaylist.id)&amp;pagetoken=@(playlistItems.nextPageToken)" title="Next">»</a></li>
                        }
                        else
                        {
                            <li class="disabled"><a>»</a></li>
                        }
                    </ul>
                }
            </div>
        </div>
        <hr />
        <h3>@Resources.YouTubeChannel.PlayListsTitle</h3>
        <hr />
        <div class="list-group">
            @foreach (var playlist in playLists.items)
            {
                <a href="?id=@playlist.id" title="@playlist.snippet.title" class="list-group-item clearfix @(currentPlaylist.id == playlist.id ? "active": string.Empty)">
                    <img class="img-responsive pull-left" src="@playlist.snippet.thumbnails["default"].url" alt="@playlist.snippet.title" />
                    <h4 class="list-group-item-heading">@playlist.snippet.title</h4>
                    <p class="list-group-item-text">@playlist.snippet.description</p>
                    <p class="list-group-item-text">
                        <small>
                            @playlist.contentDetails["itemCount"] @(playlist.contentDetails["itemCount"] == "1" ? Resources.YouTubeChannel.VideoOneCountText : Resources.YouTubeChannel.VideoCountText)
                            <span class="text-muted"> @playlist.snippet.publishedAt.ToShortDateString()</span>
                        </small>
                    </p>
                </a>
            }
        </div>
        <script type="text/javascript">
            // Load the IFrame Player API code asynchronously.
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/player_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var player;

            function onYouTubePlayerAPIReady() {
                var id = window.location.hash.substr(1);
                player = new YT.Player('ytplayer', {
                    height: '390',
                    width: '100%',
                    videoId: window.location.hash.substr(1)
                });

                if (id) {
                    var $item = $('[data-id=' + id + ']');
                    $('#js-player-title').text($item.data("title"));
                }
            }

            $(window).on('hashchange', function () {
                var id = window.location.hash.substr(1);
                player.loadVideoById({ 'videoId': id, 'suggestedQuality': 'large' });
                var $item = $('[data-id=' + id + ']');
                $('#js-player-title').text($item.data("title"));
                $('html, body').animate({ scrollTop: "0" });
            });
        </script>
    </div>
</body>

</html>